{include file="common:lay_header" / }
{include file="common:upload" / }
<style>
    .layui-upload-img {
        width: 92px;
        height: 92px;
        margin: 0 10px 10px 0;
    }
</style>
<body>
<form class="layui-form" action="" lay-filter="example">

    <!--    预览图-->

    <div class="layui-upload">
        {notempty name="images_arr"}
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="demo2">
                {volist name="images_arr" id = "item"}
                <img src="{$item}" class="layui-upload-img">
                {/volist}
            </div>
        </blockquote>
        {/notempty}
    </div>


    <!-- 多图上传开始-->

    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>文件名</th>
                    <th>大小</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
        <button type="button" class="layui-btn" id="testListAction">开始上传</button>
        <input type="hidden" name="images" class="many_upload">
    </div>

    <input type="hidden" name="id" value="{$id}">

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
        </div>
    </div>
</form>
<script src="__LAYUI__/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['upload', 'form'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , form = layui.form;

        // 多图上传
        many_upload(upload, $);

        //监听提交
        form.on('submit(demo1)', function (data) {

            let url = "{:url('many_upload')}";
            let params = data.field;
            console.log(params);
            _axios(url, params)
            return false;
        });

    });
</script>
</body>
</html>